<template>
  <div >
    <template v-if="list.length!=0">
      <div class="left-title">
        {{ list.f.name }}
      </div>
      <template v-for="(item,index) in list.zlist">
        <div class="fl-title" v-if="item.id!=120 && item.id!=121 && item.id!=110 && item.id!=131 && item.id!=113 && item.id!=112 && item.id!=111 && item.id!=133"
             :key="String(index)"
             :style="{color:item.id == dValue ? '#fd0022' : '',background: item.id == dValue ? '#f1f1f1' : ''}"
             @click="antclick(item)">{{item.name}}</div>
      </template>
    </template>
  </div>
</template>

<script>
import {getAllClssById} from "@/utils/serve/classify";
export default {
  name: "ListLife",
  props: {
    tab:{
      type: Number,
    }
  },
  data() {
    return {
      dValue: this.tab,
      list:[]
    };
  },
  watch: {
    tab(newValue, oldValue) {
      console.log(oldValue)
      this.dValue = newValue;
      this.getAllClssById(newValue)
    }
  },
  components: {
    // 第三方组件实例化
  },
  computed: {},
  methods: {
    // 方法
    antclick(e){
      console.log('1111',e)
      this.$emit("antClick", e);
    },
    getAllClssById(e){
      let _this = this;
      getAllClssById(e, res=>{
        console.log(res)
        if(res.code==0){
          _this.list = res.data;
        }
      })
    }
  },
  mounted() {
    this.getAllClssById(this.dValue)
  }
};
</script>

<style scoped lang="scss">
@import "./read";
</style>
